"use client"

import { useState } from "react"
import { View, Text, StyleSheet, TouchableOpacity, Platform } from "react-native"
import { SafeAreaView } from "react-native-safe-area-context"
import { LinearGradient } from "expo-linear-gradient"
import { ArrowLeft, Settings, List, Play, Pause, SkipBack, SkipForward, Eye, EyeOff } from "lucide-react-native"
import { useRouter } from "expo-router"
import { theme } from "../../constants/theme"
import { WordListModal, type WordListItem } from "../../components/practices/WordListModal"
import { DictationSettingsModal, type DictationSettings } from "../../components/practices/DictationSettingsModal"
import { ProgressBar } from "../../components/practices/ProgressBar"

// 模拟的听写数据
const DICTATION_DATA = [
    {
        id: "1",
        word: "apple",
        phonetic: "/ˈæp.əl/",
        meaning: "n. 苹果",
        audioUrl: "https://example.com/audio/apple.mp3",
    },
    {
        id: "2",
        word: "banana",
        phonetic: "/bəˈnɑː.nə/",
        meaning: "n. 香蕉",
        audioUrl: "https://example.com/audio/banana.mp3",
    },
    {
        id: "3",
        word: "orange",
        phonetic: "/ˈɒr.ɪndʒ/",
        meaning: "n. 橙子",
        audioUrl: "https://example.com/audio/orange.mp3",
    },
]

export default function DictationScreen() {
    const router = useRouter()
    const [currentIndex, setCurrentIndex] = useState(0)
    const [isPlaying, setIsPlaying] = useState(false)
    const [listModalVisible, setListModalVisible] = useState(false)
    const [settingsModalVisible, setSettingsModalVisible] = useState(false)
    const [hideContent, setHideContent] = useState(false)
    const [settings, setSettings] = useState<DictationSettings>({
        playTimes: 3,
        playInterval: 3,
        playMode: "both",
    })

    // 当前单词
    const currentWord = DICTATION_DATA[currentIndex]

    // 返回上一页
    const handleBack = () => {
        router.back()
    }

    // 播放/暂停
    const togglePlay = () => {
        setIsPlaying(!isPlaying)
        // TODO: 实现实际的音频播放逻辑
    }

    // 上一个
    const handlePrevious = () => {
        if (currentIndex > 0) {
            setCurrentIndex(currentIndex - 1)
        }
    }

    // 下一个
    const handleNext = () => {
        if (currentIndex < DICTATION_DATA.length - 1) {
            setCurrentIndex(currentIndex + 1)
        }
    }

    // 切换内容显示/隐藏
    const toggleHideContent = () => {
        setHideContent(!hideContent)
    }

    // 跳转到指定单词
    const jumpToWord = (index: number) => {
        setCurrentIndex(index)
        setListModalVisible(false)
    }

    // 更新设置
    const updateSettings = (key: keyof DictationSettings, value: any) => {
        setSettings((prev) => ({
            ...prev,
            [key]: value,
        }))
    }

    // 准备单词列表数据
    const wordListData: WordListItem[] = DICTATION_DATA.map((item) => ({
        id: item.id,
        word: item.word,
        phonetic: item.phonetic,
        meaning: item.meaning,
    }))

    return (
        <SafeAreaView style={styles.container} edges={["top"]}>
            <LinearGradient
                colors={theme.colors.neutral.backgroundGradient}
                start={{ x: 0, y: 0 }}
                end={{ x: 0, y: 1 }}
                style={styles.gradientBackground}
            >
                {/* 头部 */}
                <View style={styles.header}>
                    <TouchableOpacity onPress={handleBack} style={styles.headerButton}>
                        <ArrowLeft size={24} color={theme.colors.neutral.black} />
                    </TouchableOpacity>
                    <Text style={styles.headerTitle}>听写</Text>
                    <View style={styles.headerRight}>
                        <TouchableOpacity style={styles.headerButton} onPress={() => setSettingsModalVisible(true)}>
                            <Settings size={24} color={theme.colors.neutral.black} />
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.headerButton} onPress={() => setListModalVisible(true)}>
                            <List size={24} color={theme.colors.neutral.black} />
                        </TouchableOpacity>
                    </View>
                </View>

                {/* 进度条 */}
                <ProgressBar current={currentIndex + 1} total={DICTATION_DATA.length} showText={true} textPosition="top" />

                {/* 主要内容 */}
                <View style={styles.content}>
                    <View style={styles.wordCard}>
                        <TouchableOpacity style={styles.eyeButton} onPress={toggleHideContent}>
                            {hideContent ? (
                                <EyeOff size={20} color={theme.colors.neutral.gray} />
                            ) : (
                                <Eye size={20} color={theme.colors.neutral.gray} />
                            )}
                        </TouchableOpacity>

                        {hideContent ? (
                            <View style={styles.hiddenContent}>
                                <Text style={styles.hiddenText}>点击眼睛图标显示内容</Text>
                            </View>
                        ) : (
                            <View style={styles.wordContentContainer}>
                                <Text style={styles.word}>{currentWord.word}</Text>
                                <Text style={styles.phonetic}>{currentWord.phonetic}</Text>
                                <Text style={styles.meaning}>{currentWord.meaning}</Text>
                            </View>
                        )}
                    </View>

                    {/* 播放控制 */}
                    <View style={styles.controls}>
                        <TouchableOpacity style={styles.controlButton} onPress={handlePrevious}>
                            <SkipBack size={24} color={theme.colors.primary.default} />
                        </TouchableOpacity>

                        <TouchableOpacity style={styles.playButton} onPress={togglePlay}>
                            <LinearGradient colors={theme.colors.primary.gradient} style={styles.playButtonGradient}>
                                {isPlaying ? (
                                    <Pause size={32} color={theme.colors.neutral.white} />
                                ) : (
                                    <Play size={32} color={theme.colors.neutral.white} />
                                )}
                            </LinearGradient>
                        </TouchableOpacity>

                        <TouchableOpacity style={styles.controlButton} onPress={handleNext}>
                            <SkipForward size={24} color={theme.colors.primary.default} />
                        </TouchableOpacity>
                    </View>
                </View>

                {/* 单词列表弹窗 */}
                <WordListModal
                    visible={listModalVisible}
                    data={wordListData}
                    currentIndex={currentIndex}
                    onClose={() => setListModalVisible(false)}
                    onSelectWord={jumpToWord}
                    title="单词列表"
                />

                {/* 设置弹窗 */}
                <DictationSettingsModal
                    visible={settingsModalVisible}
                    settings={settings}
                    onClose={() => setSettingsModalVisible(false)}
                    onUpdateSettings={updateSettings}
                />
            </LinearGradient>
        </SafeAreaView>
    )
}

const styles:any = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: theme.colors.neutral.background,
    },
    gradientBackground: {
        flex: 1,
    },
    header: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        paddingHorizontal: theme.spacing.lg,
        paddingVertical: theme.spacing.md,
    },
    headerButton: {
        width: 40,
        height: 40,
        borderRadius: 20,
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "rgba(255, 255, 255, 0.5)",
    },
    headerTitle: {
        fontSize: theme.fontSize.lg,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.black,
        position: "absolute",
        left: 0,
        right: 0,
        textAlign: "center",
        zIndex: -1,
    },
    headerRight: {
        flexDirection: "row",
        gap: theme.spacing.sm,
    },
    content: {
        flex: 1,
        justifyContent: "space-between",
        paddingHorizontal: theme.spacing.lg,
        paddingBottom: Platform.OS === "ios" ? 34 : theme.spacing.lg,
    },
    wordCard: {
        flex: 1,
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.extraLarge,
        padding: theme.spacing.xl,
        marginBottom: theme.spacing.lg,
        justifyContent: "center", // 修改为center以垂直居中内容
        alignItems: "center",
        position: "relative",
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowOffset: { width: 0, height: 4 },
                shadowOpacity: 0.3,
                shadowRadius: 8,
            },
            android: {
                elevation: 4,
            },
        }),
    },
    word: {
        fontSize: 36,
        fontWeight: theme.fontWeight.bold,
        color: theme.colors.primary.default,
        marginBottom: theme.spacing.sm,
    },
    phonetic: {
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.gray,
        marginBottom: theme.spacing.md,
    },
    meaning: {
        fontSize: theme.fontSize.lg,
        color: theme.colors.neutral.darkGray,
    },
    eyeButton: {
        position: "absolute",
        top: theme.spacing.lg,
        right: theme.spacing.lg,
        width: 36,
        height: 36,
        borderRadius: 18,
        backgroundColor: "rgba(91, 142, 244, 0.1)",
        alignItems: "center",
        justifyContent: "center",
        zIndex: 10,
    },
    controls: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "center",
        gap: theme.spacing.xl,
        marginTop: theme.spacing.xxxl,
    },
    controlButton: {
        width: 48,
        height: 48,
        borderRadius: 24,
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "rgba(91, 142, 244, 0.1)",
    },
    playButton: {
        width: 64,
        height: 64,
        borderRadius: 32,
        overflow: "hidden",
        ...Platform.select({
            ios: {
                shadowColor: theme.colors.primary.default,
                shadowOffset: { width: 0, height: 4 },
                shadowOpacity: 0.3,
                shadowRadius: 8,
            },
            android: {
                elevation: 6,
            },
        }),
    },
    playButtonGradient: {
        width: "100%",
        height: "100%",
        alignItems: "center",
        justifyContent: "center",
    },
    hiddenContent: {
        flex: 1,
        width: "100%",
        alignItems: "center",
        justifyContent: "center",
    },
    hiddenText: {
        color: theme.colors.neutral.gray,
        fontSize: theme.fontSize.md,
    },
    wordContentContainer: {
        alignItems: "center",
        justifyContent: "center",
    },
})

